<template>
  <div class="video-container">
    <span class="time-peroid__tips" :style="{ display: displaysign }">时长: {{ timer }}</span>
    <video id="video" controls="controls" style="width: 100%; height:100%; background-color: #000; ">
      <source :src="sourceUrl" />
    </video>
    <div class="video-container__fengmian" :style="{ display: displaysign }">
      <img :src="imageUrl" style="width: 100%; height: 100%; transform: scale(1.1)">
    </div>
    <div class="video-container__logo" :style="{ display: displaysign }" @click="startVideo">
      <img class="video-play__arrow" :src="require('@/assets/image/video_play.png')" style="width: 64px; height: 64px; ">
    </div>
  </div>
</template>
<script>
import { getCookie } from '@/utils/auth.js';
export default {
  name: 'MyVideo',
  data () {
    return {
      displaysign: 'block',
      sourceUrl: '',
      imageUrl: '',
      timer: '',
      // 视频搜集信息
      closing_time: 0, // 视频开始时间
      start_time: 0, // 视频结束时间
      promotion_openid: '', // 分享人openid
      videoId: null, // 视频id
      videoElement: null, // video元素
    }
  },
  props: {
    playerData: {
      type: Object,
      default: () => {},
    },
    notDescript: {
      type: Boolean,
      default: true,
    }
  },
  mounted() {
    this.sourceUrl = this.playerData.annex && this.playerData.annex.length > 0 ? this.$uploadUrl + this.playerData.annex[0] : 'http://10.102.4.221:8089/mv.mp4'
    this.imageUrl = this.playerData && this.playerData.thumb_pic ? this.$uploadUrl + this.playerData.thumb_pic : require('@/assets/image/image_placeholder.png')
    this.timer = this.playerData.timer;
    this.$forceUpdate();
    // 看视频
    this.videoId = this.$route.query.id || this.getQueryVariable('id');
    this.promotion_openid = this.$route.query.promotion_openid || this.getQueryVariable('promotion_openid')
    this.videoElement = document.getElementById('video')
    this.videoElement.addEventListener('ended', () => {
      this.closing_time = new Date().getTime();
      if (this.videoId) {
        const params = { openid: getCookie('openid'), id: this.videoId, promotion_openid: this.promotion_openid, start_time: this.start_time, closing_time: this.closing_time };
        if (!this.promotion_openid) {
          delete params.promotion_openid
        }
        this.$action('addPlay', params)
      }
    });
  },
  methods: {
    getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i=0;i<vars.length;i++) {
        var pair = vars[i].split("=");
        if(pair[0] == variable){return pair[1];}
      }
      return false;
    },
    startVideo () {
      this.displaysign = 'none'
      this.videoElement.play()
      this.start_time = new Date().getTime();
    },
  }
}
</script>
<style lang="scss" scoped>
.video-container {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  border-radius: 10px;
  overflow: hidden;
  .time-peroid__tips {
    position: absolute;
    top: 15px;
    right: 14px;
    color: #E4E4E4;
    font-size: 18px;
    z-index: 4;
  }
  .video-container__fengmian {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
  }
  .video-container__logo {
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    .video-play__arrow {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .video-play__more {
      position: absolute;
      right: 18px;
      top: 12px;
    }
  }
  .video-container__descript {
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: 5;
    padding: 19px 21px;
    color: #fff;
  }
}
</style>